<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>图片点击按钮轮换</title>
    <style>
        #left{
            font-size: 40px;
            position:relative;
            top: 200px;
            color: black;
            float: left;
        }
        #right{
            font-size: 40px;
            /* 使用定位移动 */
            position:relative;
            top: 200px;
            color: black;
            float: left;
        }

      #div_img{
        float: left;
      }

 
    </style>
</head>
<body>
    <center>
      
        <!-- 左箭头 -->
        <button id="left" onclick="left()">
            <span>&lt;</span>
        </button>

        <div id="div_img">
            <img src="image/img1.jpg" id="pic" />
        </div>

        <!-- 由箭头 -->
        <button id="right" onclick="right()">
            <span>&gt;</span>
        </button>
    </center>

    <script>
        var pictures = [1,2,3,4];
        var i = 0;
        function showPicture(){
            i++;
            if(i == pictures.length){
                i = 0;
            }
            document.getElementById("pic").src="image/img"+pictures[i]+".jpg";
        }
        function left(){
            i--;
            if(i<0){
                i=pictures.length-1;
            }
            document.getElementById("pic").src="image/img"+pictures[i]+".jpg";
        }
        function right(){
            i++;
            if(i>pictures.length-1){
                i=0;
            }
            document.getElementById("pic").src="image/img"+pictures[i]+".jpg";
        }
    </script>
</body>
</html>
